<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/common/common.css" />
    <link rel="stylesheet" href="../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./Schedule.css" />
  </head>
  <body>
    <div class="Schedule">
      <!-- 头顶 -->
      <div class="banner bg-fff pl-20 pr-20 flex aic jc-sb">
        <div class="f20 bold">日程</div>
        <div>
          <span class="iconfont icon-sousuo"></span>
          <span class="iconfont icon-ai225 ml-15"></span>
        </div>
      </div>
      <!-- 选择时间 -->
      <div class="seleteTime rel bg-fff fdc f14">
        <div class="w100 flex jc-c aic mt-10">
          <div class="year">
            <span>&lt;</span>
            <span>2022年1月</span>
            <span>&gt;</span>
          </div>
        </div>
        <div class="week flex mt-10">
          <span class="weekday">日</span>
          <span class="weekday">一</span>
          <span class="weekday">二</span>
          <span class="weekday">三</span>
          <span class="weekday">四</span>
          <span class="weekday">五</span>
          <span class="weekday">六</span>
        </div>
        <div class="b">
          <div class="data flex mt-20"></div>
        </div>
      </div>
      <!-- 线条 -->
      <div class="button abs flex jc-c"></div>
      <!-- 列表 -->
      <div class="list pl-15 pr-15 mt-20">
        <div class="item bg-fff gray f12 lh">
          <div class="flex aic jc-sb">
            <span class="f16 black">晁文漪的入职审批</span>
            <span class="text fcc">进行中</span>
          </div>
          <div>入职员工：晁文漪</div>
          <div>入职部门：产品部</div>
          <div>提交人：晁文琦</div>
          <div>考核周期：2022年1月-2022年3月</div>
        </div>
        <div class="item bg-fff mt-15 gray f12 lh">
          <div class="flex aic jc-sb">
            <span class="f16 black">2022年01月销售部考核计划</span>
            <span class="text fcc">进行中</span>
          </div>
          <div>考核范围：销售1组；销售2组</div>
          <div>考核周期：2022年1月-2022年3月</div>
        </div>
        <div class="item bg-fff mt-15 gray f12 lh">
          <div class="flex aic jc-sb">
            <span class="f16 black">销售部季度例会</span>
            <span class="texted fcc">已完成</span>
          </div>
          <div>
            <img src="../../assets/img/u1011.png" alt="" />
            <span>朝阳公园南路1号</span>
          </div>
          <div>
            <img src="../../assets/img/u1012.png" alt="" />
            <span>2022-01-02 10:09:00</span>
          </div>
        </div>
        <div class="item bg-fff mt-15 gray f12 lh">
          <div class="flex aic jc-sb">
            <span class="f16 black">给客户报价</span>
            <span class="text fcc">进行中</span>
          </div>
          <div>截止时间：今天 12:00</div>
          <div>执行人：晁文琦</div>
          <div>参与人：罗凡</div>
        </div>
      </div>
      <div class="fot fcc gray f14">没有更多数据了～</div>
      <!-- 银幕 -->
      <div class="pop fixed rel dsn">
        <div class="popList bg-fff abs pl-20 pr-20">
          <div class="top flex aic">筛选日程</div>
          <div class="f12 gray mt-20 mb-10">日程类型</div>
          <div class="flex aic jc-sa fww">
            <div class="boxItem f12 fcc active">全部 100</div>
            <div class="boxItem f12 fcc">个人待办 6</div>
            <div class="boxItem f12 fcc">考勤 10</div>
            <div class="boxItem f12 fcc">绩效 10</div>
            <div class="boxItem f12 fcc">招聘 6</div>
            <div class="boxItem f12 fcc">审批 10</div>
            <div class="boxItem f12 fcc">会议 10</div>
            <div class="boxItem f12 fcc">资产 4</div>
            <div class="boxItem f12 fcc"></div>
          </div>
          <div class="f12 gray mt-20 mb-10">日程状态</div>
          <div class="flex aic jc-sa fww">
            <div class="boxItem f12 fcc active">全部 100</div>
            <div class="boxItem f12 fcc">进行中 6</div>
            <div class="boxItem f12 fcc">我发起的 10</div>
            <div class="boxItem f12 fcc">我参与的 10</div>
            <div class="boxItem f12 fcc">已完成 6</div>
            <div class="boxItem f12 fcc"></div>
          </div>
          <div class="popFot abs flex aic">
            <span class="butLeft fg1 fcc h100">重置</span>
            <span class="butRight fg1 fcc h100">确定</span>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer bg-fff flex aic jc-sb">
        <a href="../index/index.html" class="text h100 fdc aic jc-sb">
          <i class="iconfont icon-xietongbangong-16px"></i>
          <span>办公</span>
        </a>
        <a href="../Schedule/Schedule.html" class="text h100 fdc aic jc-sb">
          <i class="iconfont icon-richeng_schedule"></i>
          <span>日程</span>
        </a>
        <a href="../MailList/MailList.html" class="text h100 fdc aic jc-sb">
          <i class="iconfont icon-tongxunlu"></i>
          <span>通讯录</span>
        </a>
        <a href="../My/My.html" class="text h100 fdc aic jc-sb">
          <i class="iconfont icon-wode"></i>
          <span>我的</span>
        </a>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    //日期选择
    function seleteTime() {
      var htmlStr = "";
      for (var i = 1; i <= 31; i++) {
        htmlStr += `
            <p class="days fcc fdc">
                    <span>${i}</span>
                    <img src="../../assets/img/u5433.png" alt="">
            </p>
            `;
      }
      document.querySelector(".data").innerHTML = htmlStr;
    }
    seleteTime();

    $(".popList").on("click", ".boxItem", function () {
      $(this).addClass("active").siblings().removeClass("active");
    });

    $(".banner").on("click", ".icon-ai225", function () {
      $(".pop").show();
    });
    $(".popFot").on("click", "span", function () {
      $(".pop").hide();
    });
  </script>
</html>
